<!-- 基本信息&条件 -->
<template>
  <a-card title="基本信息&条件" :bordered="false">
    <a-form-model
      ref="formRef"
      :model="formData"
      :rules="formRules"
      layout="vertical">
      <a-row :gutter="24">
        <a-col :md="8" :sm="12">
          <a-form-model-item label="风险监控名称" prop="riskMonitoringName">
            <a-input v-model="formData.riskMonitoringName" :disabled="isLook" placeholder="请输入风险监控名称" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-model-item label="监控编号" prop="monitoringCode">
            <a-input v-model="formData.monitoringCode" disabled placeholder="系统自动生成" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-model-item label="是否启用" prop="isUse">
            <a-switch v-model="formData.isUse" :disabled="isLook" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="8" :sm="12">
          <a-form-model-item label="监控时间范围" prop="monitoringTime">
            <a-range-picker
              v-model="formData.monitoringTime"
              :disabled="isLook"
              format="YYYY-MM-DD"
              style="width:100%;"
              @change="(timeRange, timeStringRange) => setTimeRange('monitoringTimeStart', 'monitoringTimeEnd', timeRange, timeStringRange)"/>
          </a-form-model-item>
        </a-col>
        <a-col :md="16" :sm="12">
          <a-form-model-item label="监控频次" prop="monitoringFrequency">
            <a-radio-group v-model="formData.monitoringFrequency" :disabled="isLook">
              <a-radio value="1">实时</a-radio>
              <a-radio value="2">每天</a-radio>
              <a-radio value="3">每周</a-radio>
              <a-radio value="4">每月</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
          <div>推送方式</div>
          <div class="push-tip">需同时推送至多个邮箱或手机号，可应用中文"，"逗号隔开。如（ 508041568@qq.com，508041579@qq.com，508041599@qq.com）</div>
          <div class="push-box mt-10">
            <a-switch v-model="formData.isEmail" :disabled="isLook" />
            <div class="name">邮箱推送</div>
            <a-input v-model="formData.email" :disabled="isLook" placeholder="请输入邮箱" />
          </div>
          <div class="push-box mt-10">
            <a-switch v-model="formData.isPhone" :disabled="isLook" />
            <div class="name">手机推送</div>
            <a-input v-model="formData.phone" :disabled="isLook" placeholder="请输入手机" />
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </a-card>
</template>

<script>
export default {
  name: 'BaseInfoAndCondition',
  props: {
    isLook: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        riskMonitoringName: '',
        monitoringCode: '',
        isUse: false,
        monitoringTime: [],
        monitoringTimeStart: '',
        monitoringTimeEnd: '',
        monitoringFrequency: '',
        isEmail: false,
        email: '',
        isPhone: false,
        phone: '',
      },
      formRules: {
        riskMonitoringName: [{ required: true, message: '请输入风险监控名称！', trigger: 'change' }],
        isUse: [{ required: true, message: '请选择是否启用！', trigger: 'change' }],
        monitoringTime: [{ required: true, message: '请选择监控时间范围！', trigger: 'change' }],
        monitoringFrequency: [{ required: true, message: '请选择监控频次！', trigger: 'change' }],
      },
    }
  },
  methods: {
    setParams(data) {
    },
    getParams(isValidate) {
      let params = null;
      if (isValidate) {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            params = { ...this.formData };
          }
        });
      } else {
        params = { ...this.formData };
      }
      return params;
    },
    // 范围日期处理
    setTimeRange(startTimeName, endTimeName, timeRange, timeStringRange) {
      if (timeStringRange.length > 0) {
        const [one, two] = timeStringRange;
        this.formData[startTimeName] = one + ' ' + '00:00:00';
        this.formData[endTimeName] = two + ' ' + '23:59:59';
      } else {
        this.formData[startTimeName] = '';
        this.formData[endTimeName] = '';
      }
    },
  }
}
</script>

<style lang="less" scoped>
.push-box {
  display: flex;
  align-items: center;
  .name {
    flex-shrink: 0;
    margin: 0 8px;
  }
}
</style>